"use client"

interface ShiyiDisplayProps {
  char: string
}

export function ShiyiDisplay({ char }: ShiyiDisplayProps) {
  // 模拟数据
  const words = ['木头', '树木', '木材', '木屋', '木桌', '木椅']
  const sentences = [
    '这棵大树的木材很结实。',
    '爷爷用木头做了一张桌子。',
    '小鸟在木头上筑巢。'
  ]

  return (
    <div className="w-full h-full bg-gradient-to-br from-cyan-50 via-blue-50 to-blue-100 p-6 grid grid-cols-2 gap-4">
      {/* 左侧 */}
      <div className="flex flex-col gap-4">
        {/* 扩展含义 */}
        <div className="bg-white rounded-2xl p-4 shadow-xl flex-1 flex flex-col">
          <div className="flex items-center gap-2 text-xl font-bold mb-3 text-cyan-600">
            <span>🌟</span>
            <span>扩展含义</span>
          </div>
          <div className="text-base leading-relaxed text-gray-700 flex-1">
            "{char}"字不仅指树木本身，还可以指代木材、木制品，以及与树木相关的各种概念。在古代文化中，木还代表生命力和成长。
          </div>
        </div>

        {/* 常用组词 */}
        <div className="bg-white rounded-2xl p-4 shadow-xl flex-1 flex flex-col">
          <div className="flex items-center gap-2 text-xl font-bold mb-3 text-cyan-600">
            <span>🔤</span>
            <span>常用组词</span>
          </div>
          <div className="grid grid-cols-3 gap-2 flex-1">
            {words.map((word, index) => (
              <div
                key={index}
                className="bg-gradient-to-r from-blue-400 to-blue-500 text-white px-3 py-2 rounded-xl text-center font-semibold shadow-lg hover:shadow-xl transition-all duration-300 hover:transform hover:-translate-y-1 text-sm"
              >
                {word}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 右侧 */}
      <div className="flex flex-col gap-4">
        {/* 例句练习 */}
        <div className="bg-white rounded-2xl p-4 shadow-xl flex-1 flex flex-col">
          <div className="flex items-center gap-2 text-xl font-bold mb-3 text-cyan-600">
            <span>✏️</span>
            <span>例句练习</span>
          </div>
          <div className="flex flex-col gap-2 flex-1">
            {sentences.map((sentence, index) => (
              <div
                key={index}
                className="bg-gradient-to-r from-blue-50 to-purple-50 p-3 rounded-xl text-base text-gray-700 border-l-4 border-purple-400 hover:shadow-md transition-all duration-300 hover:transform hover:translate-x-1"
              >
                {sentence}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
} 